<template>
  <common-card title="今日订单" :value="numberFormat(orderToday)">
    <div ref="chartRef" style="width: 100%; height: 100%"></div>
    <template v-slot:bottom>
      <span>昨日订单量</span>
      <span class="number">{{ moneyFormat(orderLastDay) }}</span>
    </template>
  </common-card>
</template>
<script lang="ts">
export default {
  name: "TodayOrders",
};
</script>
<script lang="ts" setup>
//引入今日订单的相关的数据的仓库
import { useDataStore } from "../../../stores/reportData";
// 引入格式化数据的方法
import useFormat from "../../../hooks/useFormat";
// 引入echarts对象
import { $echarts } from "../../../plugins/echarts";
import { ref, computed, onMounted, watch } from "vue";
// 引入echarts相关的对象的类型
import type { EChartsType } from "echarts";
// 用来存储图表的dom对象的
const chartRef = ref();
// 用来春初rcharts的对象的
let chart: EChartsType;
const dataStore = useDataStore();
// 通过计算属性的方式来获取当前组件所需要的数据
// 今日订单数据
const orderToday = computed(() => dataStore.reportData.orderToday);
// 昨日订单量
const orderLastDay = computed(() => dataStore.reportData.orderLastDay);
// 实时的订单数据
const orderTrend = computed(() => dataStore.reportData.orderTrend || []);
//时间轴的数据
const orderTrendAxis = computed(() => dataStore.reportData.orderTrendAxis || []);
const { numberFormat, moneyFormat } = useFormat();

// 配置对象
const getOption = () => {
  return {
    // 横轴的数据配置
    xAxis: { data: orderTrendAxis.value, boundaryGap: false },

    // 纵轴的数据配置
    yAxis: { show: false },
    //系列组件
    series: [
      {
        name: "实时的订单数据",
        type: "line",
        data: orderTrend.value,
        smooth: true,
        itemStyle: {
          opacity: 0,
        },
        areaStyle: {
          color: "purple",
        },
        lineStyle: {
          opacity: 0,
        },
      },
    ],
    // 距离容器四周的位置
    grid: { left: 0, top: 0, right: 0, bottom: 0 },
    // 提示框
    tooltip: { trigger: "axis" },
  };
};

// 组件挂载后
onMounted(() => {
  //根据图表的容器 初始化echart对象
  chart = $echarts.init(chartRef.value);
  // 通过对象调用的方法，进行数据的配置操作
  chart.setOption(getOption());
  window.addEventListener("resize", () => {
    chart && chart.resize();
  });
});

watch(orderToday, () => {
  chart.setOption(getOption());
});
</script>
<style lang="scss" scoped></style>
